<template>
    <el-tabs v-model="activeTag">
        <el-tab-pane label="新增语法" name="addGrammar">
            <el-form ref="addGramarRer" :model="entity" :rules="rules" label-width="100px" size="medium" >
                <el-row style="margin-top: 10px;">
                    <el-col :span="12">
                        <el-form-item label="课程类型" prop="courseParentId">
                            <el-select v-model="entity.courseParentId" placeholder="请选择课程类型" @change="courseChangeEvent" style="width:100%" >
                                <el-option v-for="item in parentCourseData" :key="item.value" :label="item.label" :value="item.value"/>
                            </el-select>
                        </el-form-item>
                        
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="课程编号" prop="courseId">
                            <el-select v-model="entity.courseId" placeholder="请选择课程" style="width:100%">
                                <el-option v-for="item in childCourseData" :key="item.value" :label="item.label" :value="item.value"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="日语语法" prop="grammarContent">
                            <el-input v-model="entity.grammarContent" placeholder="请输入要添加的语法"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="语法解释" prop="grammarExplain">
                            <el-input v-model="entity.grammarExplain" placeholder="请输入要添加的语法解释"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!--例句-->
                <div class="exampleBox" v-for="(item,index) in entity.grammarExamples" :key="index">
                    <el-row>
                        <el-col :span="20">
                            <el-form-item label="语法例句" :prop="'grammarExamples.'+index+'.contentR'">
                                <el-input v-model="item.contentR" placeholder="请输入要添加的语法"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">
                            <el-button style="margin-left: 30px;" circle icon="el-icon-mic"
                                :type="item.recorderExist == true?'warning':'success'"   
                                @mousedown.native="startRecord(item)" 
                                @mouseup.native="stopRecord(item)">
                            </el-button>
                        </el-col>
                        <el-col :span="2">
                            <span v-if="item.recorderExist == false" style="line-height: 40px;color: seagreen;">录入发音</span>
                            <span v-else style="line-height: 40px;color: chocolate;">重新录入</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="20">
                            <el-form-item label="例句翻译" :prop="'grammarExamples.'+index+'.contentZ'">
                                <el-input v-model="item.contentZ" placeholder="请输入要添加的语法解释"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">
                            <el-button style="margin-left: 30px;" type="primary" icon="el-icon-plus" circle @click="addExample"></el-button>
                        </el-col>
                        <el-col :span="2">
                            <el-button v-if="index != 0" style="margin-left: 30px;" type="danger" icon="el-icon-minus" circle @click="delExample(index)"></el-button>
                        </el-col>
                    </el-row>
                </div>
                
            </el-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import {getCourseTreeApi} from '@/api/words/wordApi'
    export default{
        data(){
            return {
                //激活的标签页
                activeTag:'addGrammar',
                //渲染主课程的数据
                parentCourseData:[],
                //渲染子课程的数据
                childCourseData:[],
            }
        },
        props:{
            entity:{
                type: Object,
                required: true
            },
            rules:{
                type: Object,
                required: true
            }
        },
        methods:{
            //重置表单
            reset(){
                this.$refs.addGramarRer.resetFields();
            },
            //校验表单
            validate(){
                let checkResult = true;
                this.$refs.addGramarRer.validate((valid) => {
                    checkResult = valid;
                })
                return checkResult;
            },
            //获取课程树（数据）
            getCourseTree(){
                getCourseTreeApi().then(data=>{
                    this.parentCourseData = data.map(item=>({value:item.courseId,label:item.courseName}));
                }).catch(err=>{
                    this.$message.error(err);
                })
            },
            //课程数据改变
            courseChangeEvent(v){
                this.searchEntity = {courseParentId:v,courseId:null,grammarContent:"",grammarExplain:""}
                if(v != 'ALL'){
                    getCourseTreeApi().then(data=>{
                        let result = data.find(node=>node.courseId == v);
                        if(result.child.length > 0){
                            this.childCourseData = result.child.map(item=>({value:item.courseId,label:item.courseName}))
                        }
                    }).catch(err=>{
                        this.$message.error(err);
                    })
                }
            },
            //添加例句
            addExample(){
                this.entity.grammarExamples.push({
                    fileId:null,
                    contentR:'',
                    contentZ:'',
                    recorderExist:false
                })
            },
            //删除例句
            delExample(index){
                this.entity.grammarExamples.splice(index,1)
            },
            //开启录音
            startRecord(item){
                if(item.contentR){
                    this.$recorder.startRecording(this.$getUniqueId());
                }else{
                    this.$message.error('请先录入日语例句');
                }
            },
            //停止录音
            stopRecord(item){
                if(item.contentR){
                    item.recorderExist = true;
                    this.$recorder.stopRecording();
                    setTimeout(()=>{
                        item.fileId = this.$recorder.getFileId();
                    },200)
                }
            },
        },
        mounted(){
            this.getCourseTree();
        }
    }
</script>

<style scoped lang="scss">
    .exampleBox{
        border: 1px dashed grey;
        padding: 10px 10px;
        border-radius: 8px;
        margin-top: 10px;
    }
</style>